<!-- updated 2022/02/24 -->
<template>
  <div class="loading" :class="[position, size, forbidClick ? 'fill' : '']">
    <div class="loading-center" :class="{ bg: showBackground }">
      <div class="dots">
        <div class="object object-1" style="transform: scale(0)"></div>
        <div class="object object-2" style="transform: scale(0)"></div>
        <div class="object object-3" style="transform: scale(0)"></div>
      </div>
      <p v-if="showMsg" class="msg">{{ msg }}</p>
    </div>
  </div>
</template>

<script setup>
defineProps({
  msg: { type: String, default: '加载中...' },
  showMsg: Boolean,
  showBackground: Boolean,
  forbidClick: Boolean,
  // 大小 xsmall/small/large/
  size: { type: String, default: 'large' },
  // 位置 center/inline
  position: {
    type: String,
    default: 'center'
  }
})
</script>

<style lang="scss" scoped>
.loading {
  z-index: 99;
  font-size: var(--zui-size-text-small);
  &.fill {
    position: absolute;
    width: 100%;
    height: 100%;
    .loading-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  }
  &.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .loading-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &.bg {
      width: 100px;
      height: 100px;
      background: #ffffff;
      box-shadow: var(--zui-box-shadow);
      border-radius: var(--zui-size-border-radius-regular);
    }
    .dots {
      display: block;
      overflow: hidden;
      .object {
        width: 10px;
        height: 10px;
        background-color: var(--zui-color-primary);
        float: left;
        border-radius: 50%;
        &:not(:last-child) {
          margin-right: 10px;
        }
        &.object-1 {
          animation: object-1 0.9s infinite;
        }
        &.object-2 {
          animation: object-1 0.9s infinite 0.15s;
        }
        &.object-3 {
          animation: object-1 0.9s infinite 0.3s;
        }
      }
    }

    .msg {
      text-align: center;
      margin-top: 8px;
      color: var(--zui-color-primary);
    }
  }
  &.small {
    .dots {
      .object {
        width: 8px;
        height: 8px;
        &:not(:last-child) {
          margin-right: 8px;
        }
      }
    }
  }
  &.xsmall {
    .dots {
      .object {
        width: 6px;
        height: 6px;
        &:not(:last-child) {
          margin-right: 6px;
        }
      }
    }
  }
}

@keyframes object-1 {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
</style>
